Netbean with SCSS

工具
評論

1.安裝 Ruby + Compass

在設定之前，必需先完成 Ruby 的安裝，請參閱筆者文章 [Ruby 安裝 on Window 快速指南]
(http://liaosankai.logdown.com/posts/245873-ruby-install-on-window-quick-guide)。

2. 設定 SCSS/LESS 編譯工具

Netbean 提供了 scss 和 less 的設定，這邊先以 scss 為主。從上方功能列表 Tools > Options > Miscellaneous 開啟 CSS Preprocessors 頁籤功能介面。若先前有完成了步驟一動作，直接點擊「Search」按鈕，就會自動帶入 C:\Ruby200\bin\sass.bat 字串 (依每個人安裝的位置，可能會有些微不同) 到 Sass Path 中，若沒有自動帶入 (通常是安裝時沒加入到系統環境變數)，也可以改「Browser」自己指定到安裝的位置。

另外兩個勾選的選頂 Open Output on Error 表示在編譯 scss 檔案時，若遇到錯誤就會將訊息輸出在 Output 視窗中，Generate extra information (debug) 則是在產生 css 中，會加註用來除錯的相關資訊。

3. 設定專案 SCSS/LESS 編譯參數

在專案資料夾滑鼠右鍵，點擊「Properties」開啟專案設定視窗，並選擇 CSS Preprocessors 頁籤。

open-projects-properties.png

必需先勾選 Compile Sass Files on Save 後，才能設定存放 scss 來源資料夾以及存放編譯後的 css 目的資料夾。(通常會設定一組，不過也是可以多個組)，接下來就是最重要的 Compiler Options (編譯參數) 部分。

css-project-properties.png

可使用參數可以參考 Sass 官方文件 Options 的部分。不過主要的參數大概就只有以下三個

  • --compass 以支援 compass 的方式編譯
  • --line 為每個 style 加註原始 scss 的檔案位置和行數
  • --style 編譯出來的 CSS 排版格式

接下來我針對了不同參數最後編譯出來的 css 樣式進行擷圖如下：

參數 --compass --style nested 的結果

style-nested.png
參數 --compass --style expanded 的結果

style-expanded.png
參數 --compass --style compact 的結果

style-compact.png
參數 --compass --style compressed 的結果

style-compressed.png
參數 --compass --line --style expanded 的結果

line.png

4. 寫 sass/scss 注意事項

若在編譯 sass/scss 出現了下列的錯誤

Syntax error: Invalid CP950 character "\xE4" on line 7 of C:\mystyle.scss Use --trace for backtrace.

表示文件中含有非 ASCII 碼的字元(中文)存在，所以必需在文件加上 @charset "UTF-8"; 就可以避免此錯誤的發生

目錄

Go Top